<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识库助手</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8">
        <!-- 知识库管理 -->
        <div class="mb-8">
            <h2 class="text-2xl font-bold mb-4">知识库管理</h2>
            <div class="bg-white rounded-lg shadow p-6">
                <div class="mb-4">
                    <input type="text" id="kb-name" placeholder="知识库名称" class="border p-2 rounded w-full mb-2">
                    <textarea id="kb-desc" placeholder="知识库描述" class="border p-2 rounded w-full mb-2"></textarea>
                    <select id="embedding-model" class="border p-2 rounded w-full mb-4">
                        <option value="bge-large">bge-large</option>
                    </select>
                    <div class="flex space-x-2">
                        <button onclick="createKnowledgeBase()" class="bg-blue-500 text-white px-4 py-2 rounded">
                            创建知识库
                        </button>
                        <button onclick="refreshKnowledgeBases()" class="bg-gray-500 text-white px-4 py-2 rounded">
                            刷新列表
                        </button>
                    </div>
                </div>
                <div id="kb-list" class="space-y-2">
                    <!-- 知识库列表将通过 JS 动态加载 -->
                </div>
            </div>
        </div>

        <!-- 文档管理 -->
        <div class="mb-8">
            <h2 class="text-2xl font-bold mb-4">文档管理</h2>
            <div class="bg-white rounded-lg shadow p-6">
                <div class="mb-4">
                    <!-- 知识库选择 -->
                    <select id="kb-select" class="border p-2 rounded w-full mb-2">
                        <option value="" disabled selected>请选择知识库</option>
                    </select>
                    
                    <!-- 分割方法选择 -->
                    <select id="split-method" class="border p-2 rounded w-full mb-2">
                        <option value="char">按字符分割</option>
                        <option value="word">按词分割</option>
                        <option value="sentence">按句子分割</option>
                        <option value="paragraph">按段落分割</option>
                        <option value="raw">保持原格式</option>
                    </select>
                    
                    <!-- 文件上传区域 -->
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center">
                        <input type="file" id="file-input" class="hidden" accept=".txt,.md,.pdf,.doc,.docx,.csv,.xlsx,.xls">
                        <label for="file-input" class="cursor-pointer text-blue-500 hover:text-blue-600">
                            <svg class="w-8 h-8 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                            </svg>
                            <span>点击选择文件或拖拽文件到此处</span>
                        </label>
                        <p id="selected-file-name" class="mt-2 text-sm text-gray-500"></p>
                    </div>
                    
                    <!-- 操作按钮 -->
                    <div class="flex justify-between mt-4">
                        <div class="space-x-2">
                            <button id="upload-btn" onclick="uploadDocument()" class="bg-blue-500 text-white px-4 py-2 rounded" disabled>
                                上传文档
                            </button>
                            <button onclick="showFormatHelp()" class="text-blue-500 hover:text-blue-600">
                                <svg class="w-5 h-5 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                格式说明
                            </button>
                        </div>
                    </div>
                    
                    <!-- 任务状态显示 -->
                    <div id="task-status" class="mt-4"></div>
                </div>
            </div>
        </div>

        <!-- 对话界面 -->
        <div>
            <h2 class="text-2xl font-bold mb-4">智能对话</h2>
            <div class="bg-white rounded-lg shadow p-6">
                <div class="mb-4">
                    <select id="chat-kb-select" class="border p-2 rounded w-full mb-2">
                        <!-- 知识库选项将通过 JS 动态加载 -->
                    </select>
                    <select id="chat-model" class="border p-2 rounded w-full mb-2">
                        <option value="openchat">OpenChat</option>
                        <option value="qwen2.5">Qwen2.5</option>
                    </select>
                    <select id="system-prompt" class="border p-2 rounded w-full mb-2">
                        <option value="">默认系统提示词</option>
                        <!-- 系统提示词模板将通过 JS 动态加载 -->
                    </select>
                </div>
                <div id="chat-messages" class="h-96 overflow-y-auto border rounded p-4 mb-4">
                    <!-- 对话消息将通过 JS 动态加载 -->
                </div>
                <div class="flex space-x-2">
                    <input type="text" id="chat-input" placeholder="输入问题..." 
                           class="border p-2 rounded flex-1"
                           onkeypress="if(event.keyCode==13) sendMessage()"
                           disabled>
                    <button id="chat-btn" onclick="sendMessage()" class="bg-blue-500 text-white px-4 py-2 rounded" disabled>
                        发送
                    </button>
                    <button onclick="stopChat()" class="bg-red-500 text-white px-4 py-2 rounded">
                        停止
                    </button>
                    <button onclick="resetChat()" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                        </svg>
                        重置对话
                    </button>
                </div>
            </div>
        </div>
    </div>


    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</body>
</html> 